﻿<%@ Page Title="Books List" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="Books.aspx.vb" Inherits="BooksReviewApp.Books" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style>
	  .center {
	    text-align: justify;
	  }
	  .final {
	    color: black;
	    padding-right: 3px; 
	  }
	  .interim {
	    color: gray;
	  }
	  .info {
	    font-size: 10px;
	    text-align: justify;
	    color: #777;
	    display: none;
	  }
	  .right {
	    text-align: center;
	  }

	  #info {
	    font-size: 11px;
	    text-align: justify;
	    color: #777;
	    visibility: hidden;
	  }

	  #start_button {
	    border: 0;
	    background-color:transparent;
	    padding: 0;
	  }

	  #div_language{
	      font-size: 8px;
	  }

	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div class="aside2">

        <br />
        <h3>Search</h3>
        <br />
        <br />
        <div id="info">
	  <p id="info_start">Click on the microphone icon and begin speaking.</p>
	  <p id="info_speak_now">Speak now.</p>
	  <p id="info_no_speech">No speech was detected. You may need to adjust your
	    <a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">
	      microphone settings</a>.</p>
	  <p id="info_no_microphone" style="display:none">
	    No microphone was found. Ensure that a microphone is installed and that
	    <a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">
	    microphone settings</a> are configured correctly.</p>
	  <p id="info_allow">Click the "Allow" button above to enable your microphone.</p>
	  <p id="info_denied">Permission to use microphone was denied.</p>
	  <p id="info_blocked">Permission to use microphone is blocked. To change,
	    go to chrome://settings/contentExceptions#media-stream</p>
	  <p id="info_upgrade">Web Speech API is not supported by this browser.
	     Upgrade to <a href="//www.google.com/chrome">Chrome</a>
	     version 25 or later.</p>
	</div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <div class="right">
                    <button id="start_button" onclick="startButton(event)">
                        <img id="start_img" src="Images/mic.gif" alt="Start">
                    </button>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
	<div class="center">

	  <div id="div_language">
	    <select id="select_language" onchange="updateCountry()"></select>
	    &nbsp;&nbsp;
	    <select id="select_dialect"></select>
	  </div>
	</div>
        
        <asp:TextBox ID="tb_search" runat="server"/>
                
        <br />
        <table>
            <tr>
                <td>
                    <asp:Button ID="btn_findByName" runat="server" Text="By Name" CssClass="m-btn blue" />
                </td>
                <td>
                    <asp:Button ID="btn_findByCategory" runat="server" Text="By Category" CssClass="m-btn blue" />
                </td>
            </tr>
        </table>
        <br />
        <h3>
            Tag Cloud</h3>
        <div class="CloudBox">
            <br />
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:BooksReviewDBConnectionString1 %>"
                ProviderName="<%$ ConnectionStrings:BooksReviewDBConnectionString1.ProviderName %>" SelectCommand="SELECT BookTagJunction.Tag_FK, Count(BookTagJunction.Tag_FK) AS TotalTags, Tags.Tag
                            FROM Tags INNER JOIN BookTagJunction ON Tags.ID = BookTagJunction.Tag_FK
                            GROUP BY BookTagJunction.Tag_FK, Tags.Tag"></asp:SqlDataSource>
            <asp:Literal ID="CloudTags" runat="server"></asp:Literal>
        </div>
        <br />
        <h3>
            Language Cloud</h3>
        <div class="CloudBox">
            <br />
            <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:BooksReviewDBConnectionString1 %>"
                ProviderName="<%$ ConnectionStrings:BooksReviewDBConnectionString1.ProviderName %>" SelectCommand="SELECT * FROM CodingLanguage_Cloud WHERE IsVerified = 1"></asp:SqlDataSource>
            <asp:Literal ID="LanguageTags" runat="server"></asp:Literal>
        </div>
    </div>

    <h2 id="myHeading" runat="server">
    </h2>
    <asp:Button ID="btn_AddBook" runat="server" Text="Add Book" CssClass="m-btn purple"
        PostBackUrl="~/AddBook.aspx" />
    <div class="mainDiv2">
        <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource2">
            <ItemTemplate>
                <li class="hoverClass">
                    <asp:Label ID="lbl_Name" CssClass="BookNameLabel" runat="server" Text='<%# Eval("BookName") %>' />
                    <br />

                    <a href="book-review/<%# Eval("ID").ToString %>/<%# getSlug(Eval("BookName")) %>" />

                    <asp:Label ID="lbl_Category" CssClass="CategoryLabel" runat="server" Text='<%# Eval("Category") %>' />
                    <br />
                    <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("ID", "BookDetails.aspx?ID={0}")%>' CssClass="NoLinks">

                        <img src='<%# Eval("Thumbnail") %>'  alt="No picture found"  width="100" height="100" style="border-style: solid; border-width: medium" />
                    </asp:HyperLink>
                    <br />
                    <asp:Label ID="lbl_Time" runat="server" Text='<%# CalculateTime.calculateTimeNoHours(Eval("DateAdded")) %>'
                        ForeColor="#7AC0DA" />
                    •
                    By •
                    <asp:HyperLink ID="HyperLink2" runat="server" Text='<%# Eval("Bibliophile")%>' NavigateUrl='<%# Eval("Bibliophile", "Profile.aspx?Bibliophile={0}") %>'
                        ForeColor="Red" Font-Bold="True" CssClass="red" Font-Size="Smaller">
                        <asp:Label ID="BibliophileLabel" CssClass="BookNameLabel" runat="server" Text='<%# Eval("Bibliophile") %>' />
                    </asp:HyperLink><br />
                </li>
            </ItemTemplate>
            <LayoutTemplate>
                <ul class="ItemContainer">
                    <li runat="server" id="itemPlaceholder" />
                </ul>
            </LayoutTemplate>
        </asp:ListView>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:BooksReviewDBConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:BooksReviewDBConnectionString1.ProviderName %>" SelectCommand="SELECT * FROM [Books_Categories_View] WHERE IsVerified = 1 ORDER BY DateAdded DESC">
        </asp:SqlDataSource>
        <br />
        <div class="nextLine">
            <asp:DataPager ID="DataPagerBooks" runat="server" PagedControlID="ListView1" PageSize="12">
                <Fields>
                    <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False"
                        ButtonType="Link" ButtonCssClass="buttonDataPage" />
                    <asp:NumericPagerField ButtonType="Link" />
                    <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False"
                        ButtonType="Link" ButtonCssClass="buttonDataPage" />
                </Fields>
            </asp:DataPager>
        </div>
        <br />
    </div>
    
    <script>
        var langs =
        [['Deutsch', ['de-DE']],
         ['English',         ['en-GB', 'United Kingdom'],
                             ['en-US', 'United States']],
         ['Español',         ['es-AR', 'Argentina'],
                             ['es-ES', 'España'],
                             ['es-MX', 'México'],
                             ['es-VE', 'Venezuela']],
         ['Italiano', ['it-IT', 'Italia']],
         ['Français', ['fr-FR']]];

        for (var i = 0; i < langs.length; i++) {
            select_language.options[i] = new Option(langs[i][0], i);
        }
        select_language.selectedIndex = 6;
        
        select_dialect.selectedIndex = 6;
        showInfo('info_start');

        function updateCountry() {
            for (var i = select_dialect.options.length - 1; i >= 0; i--) {
                select_dialect.remove(i);
            }

            var list = langs[select_language.selectedIndex];
            for (var i = 1; i < list.length; i++) {
                select_dialect.options.add(new Option(list[i][1], list[i][0]));
            }
            select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
        }

        var final_transcript = '';
        var recognizing = false;
        var ignore_onend;
        var start_timestamp;
        if (!('webkitSpeechRecognition' in window)) {
            upgrade();
        } else {
            start_button.style.display = 'inline-block';
            var recognition = new webkitSpeechRecognition();
            recognition.continuous = true;
            recognition.interimResults = true;

            recognition.onstart = function () {
                recognizing = true;
                showInfo('info_speak_now');
                start_img.src = "<%=ResolveUrl("~/Images/mic-animate.gif")%>";

            };

            recognition.onerror = function (event) {
                if (event.error == 'no-speech') {
                    start_img.src = "<%=ResolveUrl("~/Images/mic.gif")%>";
                    showInfo('info_no_speech');
                    ignore_onend = true;
                }
                if (event.error == 'audio-capture') {
                    start_img.src = "<%=ResolveUrl("~/Images/mic.gif")%>";
                    showInfo('info_no_microphone');
                    ignore_onend = true;
                }
                if (event.error == 'not-allowed') {
                    if (event.timeStamp - start_timestamp < 100) {
                        showInfo('info_blocked');
                    } else {
                        showInfo('info_denied');
                    }
                    ignore_onend = true;
                }
            };

            recognition.onend = function () {
                recognizing = false;
                if (ignore_onend) {
                    return;
                }
                start_img.src = "<%=ResolveUrl("~/Images/mic.gif")%>";
                if (!final_transcript) {
                    showInfo('info_start');
                    return;
                }
                showInfo('');
                if (window.getSelection) {
                    window.getSelection().removeAllRanges();
                    var range = document.createRange();
                    range.selectNode(document.getElementById('final_span'));
                    window.getSelection().addRange(range);
                }
            };

            recognition.onresult = function (event) {
                var interim_transcript = '';
                for (var i = event.resultIndex; i < event.results.length; ++i) {
                    if (event.results[i].isFinal) {
                        final_transcript += event.results[i][0].transcript;
                    } else {
                        interim_transcript += event.results[i][0].transcript;
                    }
                }
                final_transcript = capitalize(final_transcript);
                //As TextBox is server control, so on runtime this control have different client id
                var elem = document.getElementById('<%=tb_search.ClientID%>');
                elem.value = final_transcript;

            };
        }

        function upgrade() {
            start_button.style.visibility = 'hidden';
            showInfo('info_upgrade');
        }

        var two_line = /\n\n/g;
        var one_line = /\n/g;
        function linebreak(s) {
            return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
        }

        var first_char = /\S/;
        function capitalize(s) {
            return s.replace(first_char, function (m) { return m.toUpperCase(); });
        }

        function startButton(event) {
            if (recognizing) {
                recognition.stop();
                return false;
            }
            final_transcript = '';
            recognition.lang = select_dialect.value;
            recognition.start();
            ignore_onend = false;

            start_img.src = "<%=ResolveUrl("~/Images/'mic-slash.gif")%>";
            showInfo('info_allow');
            showButtons('none');
            start_timestamp = event.timeStamp;
        }

        function showInfo(s) {
            if (s) {
                for (var child = info.firstChild; child; child = child.nextSibling) {
                    if (child.style) {
                        child.style.display = child.id == s ? 'inline' : 'none';
                    }
                }
                info.style.visibility = 'visible';
            } else {
                info.style.visibility = 'hidden';
            }
        }
</script>
</asp:Content>
